<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #admin_wrapper {
            width:calc(100% - 64px);
            height:100%;
            padding: 32px;
            overflow-x: scroll;
        }
        #admin_add_form {
            padding: 20px;
            margin-top:50px;
            background:#fff;
            box-shadow: 0 0 10px #757575;
            border-radius:5px;
        }
        .form_input_text {
            width:100%;
            border:none;
            border-bottom:1px #333 solid;
            margin-top:30px;
            outline:none;
            padding:8px;
            font-size:15px;
            color:#333;
        }
        #admin_add_submit {
            width:20%;
            padding:8px;
            float:right;
            border:none;
            outline:none;
            background-color:#f44336;
            color:#fff;
            font-weight:600;
            border-radius:5px;
            margin-top:30px;
            cursor:pointer;
        }
        #admin_add_submit:hover {
            filter: brightness(110%);
        }
        #role_choose_wrapper {
            margin-top:30px;
            margin-left:15px;
        }
        .role_checkbox {
            width:calc(100% - 30px);
            padding:5px 0 5px 0;
            height:15px;
            font-size:12px;
            color:#333;
            line-height:15px;
        }
        .role_checkbox > input[type=checkbox] {
            float:left;
            width:15px;
            height:15px;
            margin-right:15px;
        }
    </style>
</head>
<body>
    <div id="admin_wrapper">
        <input type="hidden" value="${request.contextPath}" id="root" />
        <div class="wrapper_head">
            <h2>管理员添加</h2>
        </div>
        <form id="admin_add_form" method="post" target="rfFrame">
            <h3>添加管理员: </h3>
            <input type="hidden" id="role_id" value="-1" />
            <input type="text" class="form_input_text" name="admin_username" id="admin_username" placeholder="管理员用户名..." autocomplete="off" />
            <input type="password" class="form_input_text" name="admin_password" id="admin_password" placeholder="管理员密码..." autocomplete="off" />
            <input type="password" class="form_input_text" placeholder="确认管理员密码..." id="admin_password_confirm" autocomplete="off" />
            <input type="text" class="form_input_text" name="admin_email" placeholder="管理员邮箱..." id="admin_email" autocomplete="off" />
            <div id="role_choose_wrapper">
                <h4>选择角色: </h4>
            </div>
            <input type="submit" id="admin_add_submit" name="submit" value="添加" />
            <iframe id="rfFrame" name="rfFrame" src="about:blank" style="display:none;"></iframe>
            <div style="clear:both"></div>
        </form>
    </div>
</body>
<script>
    $("#admin_add_form").submit(function() {
        var username = $("#admin_username").val();
        var password = $("#admin_password").val();
        var password_confirm = $("#admin_password_confirm").val();
        var email = $("#admin_email").val();
        var roleId = $("#role_selector").val();
        var reg = new RegExp("\\w{4, 20}");
        if(roleId == -1) {
            alert("请选择一个角色!");
            return false;
        }
        if(username.trim() == "" && reg.test(username)) {
            alert("用户名不能为空!");
            return false;
        }
        if(password.trim() == "") {
            alert("密码不能为空!");
            return false;
        }
        if(password_confirm.trim() == "") {
            alert("密码确认不能为空!");
            return false;
        }
        if(password_confirm != password) {
            alert("两次密码不一致!");
            return false;
        }
        if(email.trim() == "") {
            alert("邮箱地址不能为空!");
            return false;
        }
        $.ajax({
            url: $("#root").val()+"/addAdmin",
            type: "post",
            data: $(this).serialize(),
            dataType: "text",
            success: function(data) {
                if(data == "success") {
                    $("#admin_username").val("");
                    $("#admin_password").val("");
                    $("#admin_password_confirm").val("");
                    $("#admin_email").val("");
                    $("input[type=checkbox]").prop("checked", false);
                    alert("添加成功!");
                } else {
                    alert(data);
                    return false;
                }
            },
            error: function(data, type, err) {
                alert(type+"---"+err);
                return false;
            }
        })
    })
    getRoleList();
    function getRoleList() {
        $.ajax({
            url: "${request.contextPath}/getRoleList",
            async: false,
            dataType: "text",
            success: function(data) {
                if(data != "") {
                    var json = JSON.parse(data);
                    for(var j in json) {
                        $("<div class='role_checkbox'><input type='checkbox' value='"+json[j].id+"' name='role_checkbox' /><span>"+json[j].name+"</span> </div>").appendTo($("#role_choose_wrapper"));
                    }
                }
            },
            error: function(data) {

            }
        })
    }
</script>
</html>